<template>
    <div class="header">
        <div class="header-left ">
            <div class="iconfont back-icon">&#xe60a;</div>
        </div>
        <div class="header-input"> <span class="iconfont">&#xe60e;</span>输入城市/景点/游玩主题</div>
        <router-link to="/city">
          <div class="header-right"> {{this.city}}<span class="iconfont arrow-icon">&#xe6aa;</span></div>
        </router-link>
    </div>
</template>

<script>
import {mapState} from 'vuex'
    export default {
        name:"HomeHeader",
        computed: {
          ...mapState(['city'])
          //...mapState把这个组件的东西映射到computed里
          //这个city则是把 city映射到city计算属性中
        },
    }
</script>

<style lang="stylus" scoped>
 @import '~@style/varibles.styl'
    .header 
        display :flex
        line-height:$headerHigh
        background :$bgColor
        color:#fff
      .header-left 
        width:.64rem
        float:left
        .back-icon
            text-align:center
            font-size: .4rem
      .header-input
        flex:1
        line-height :.64rem
        height:.64rem
        margin-top:.19rem
        margin-left:.2rem
        padding-left:.2rem
        background :#fff
        border-radius : .1rem
        color:#ccc
      .header-right 
        nin-width:1.04rem
        padding:.1rem
        float:right
        text-align :center
        color #fff
        .arrow-icon
          font-size:.3rem
       
</style>